﻿@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.BordersModel
@{
    ViewData["Title"] = "Borders";
}

@section styles {
    <abp-style-bundle>
        <abp-style src="/css/demo.css" />
    </abp-style-bundle>
}

@section scripts {
    <abp-script-bundle>
        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
            <abp-script src="/Pages/Components/highlightCode.js" />*@
    </abp-script-bundle>
}

<style>
    .border-span span {
        display: inline-block;
        width: 5rem;
        height: 5rem;
        margin: .25rem;
        background-color: #f5f5f5;
    }
</style>

<link rel="stylesheet"
      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<h2>Borders</h2>

<p>Based on <a href="https://getbootstrap.com/docs/4.1/utilities/borders/" target="_blank"> Bootstrap Border</a>.</p>

<h4>Border</h4>

<h5>Additive</h5>

<div class="demo-with-code">
    <div class="demo-area border-span">
        <span abp-border="Default"></span>
        <span abp-border="Top"></span>
        <span abp-border="Right"></span>
        <span abp-border="Bottom"></span>
        <span abp-border="Left"></span>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;span abp-border=&quot;Default&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Top&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Right&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Bottom&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Left&quot;&gt;&lt;/span&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;span class=&quot;border&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-top&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-right&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-bottom&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-left&quot;&gt;&lt;/span&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h5>Subtractive</h5>

<div class="demo-with-code">
    <div class="demo-area border-span">
        <span abp-border="_0"></span>
        <span abp-border="Top_0"></span>
        <span abp-border="Right_0"></span>
        <span abp-border="Bottom_0"></span>
        <span abp-border="Left_0"></span>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;span abp-border=&quot;_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Top_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Right_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Bottom_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Left_0&quot;&gt;&lt;/span&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;span class=&quot;borde-0&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-top-0&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-right-0&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-bottom-0&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-left-0&quot;&gt;&lt;/span&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Border color</h4>

<div class="demo-with-code">
    <div class="demo-area border-span">
        <span abp-border="Primary"></span>
        <span abp-border="Secondary"></span>
        <span abp-border="Success"></span>
        <span abp-border="Danger"></span>
        <span abp-border="Info"></span>
        <span abp-border="Light"></span>
        <span abp-border="Dark"></span>
        <span abp-border="White" ></span>
        <br/>
        <span abp-border="Left_Primary"></span>
        <span abp-border="Top_Secondary"></span>
        <span abp-border="Right_Success"></span>
        <span abp-border="Bottom_Danger"></span>
        <span abp-border="Bottom_Warning"></span>
        <span abp-border="Left_Info"></span>
        <span abp-border="Top_Light"></span>
        <span abp-border="Right_Dark"></span>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;span abp-border=&quot;Primary&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Secondary&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Success&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Danger&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Info&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Light&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Dark&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;White&quot;&gt;&lt;/span&gt;
&lt;br/&gt;
&lt;span abp-border=&quot;Left_Primary&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Top_Secondary&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Right_Success&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Bottom_Danger&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Bottom_Warning&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Left_Info&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Top_Light&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Right_Dark&quot;&gt;&lt;/span&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;span class=&quot;border border-primary&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-secondary&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-success&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-danger&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-warning&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-info&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-light&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-dark&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-white&quot;&gt;&lt;/span&gt;
&lt;br/&gt;
&lt;span class=&quot;border border-left border-primary&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-top border-secondary&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-right border-success&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-bottom border-danger&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-bottom border-warning&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-left border-info&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-top border-light&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-right border-dark&quot;&gt;&lt;/span&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Border-radius</h4>

<div class="demo-with-code">
    <div class="demo-area border-span">
        <span abp-border="Primary" abp-rounded="Default"></span>
        <span abp-border="Primary" abp-rounded="_0"></span>
        <span abp-border="Primary" abp-rounded="Top"></span>
        <span abp-border="Primary" abp-rounded="Left"></span>
        <span abp-border="Primary" abp-rounded="Bottom"></span>
        <span abp-border="Primary" abp-rounded="Right"></span>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Default&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Top&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Left&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Bottom&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Right&quot;&gt;&lt;/span&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;span class=&quot;border border-primary rounded&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-primary rounded-0&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-primary rounded-top&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-primary rounded-left&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-primary rounded-bottom&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-primary rounded-right&quot;&gt;&lt;/span&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>
